<template>
  <div class="tool-video">
    <div class="list1">
      <h5>投放分类：</h5>
      <span>全部</span>
      <span v-for="item in 8" :key="item">食品饮料</span>
    </div>
    <div class="list2">
      <input type="text" />
      <button>搜索</button>
      <div class="downloads">
        <h6>下载次数</h6>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="category">
        <h6>类别</h6>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="type">
        <h6>引流类型</h6>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="list3">
      <div class="video-list" v-for="item in 20" :key="item">
        <div class="video">
          <img src="" alt="" />
          <h2>运动-竹节跳绳 <b>单品</b></h2>
          <p>高颜值朱姐跳绳</p>
          <span><i>New</i><b>商品引流</b><strong>32</strong></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
    };
  },
};
</script>

<style lang="less" scoped>
.tool-video {
  background: #fff;
  padding: 20px;
  font-size: 14px;
  .list1 {
    display: flex;
    margin: 20px 0;
    align-items: center;
    h5 {
      font-weight: 900;
    }
    span {
      background: #ccc;
      margin-right: 30px;
      padding: 5px 8px;
      border-radius: 5px;
    }
  }
  .list2 {
    display: flex;
    align-items: center;
    div {
      display: flex;
      align-items: center;
      margin-right: 30px;
      h6 {
        margin-right: 5px;
      }
    }
    button {
      margin-right: 30px;
    }
  }
  .list3 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .video-list {
      .video {
        border-radius: 10px;
        overflow: hidden;
        width: 269px;
        margin: 20px 10px 0 0;
        img {
          width: 100%;
          height: 90px;
        }
      }
      h2 {
        font-size: 18px;
        font-weight: 900;
        margin: 10px;
        b {
          float: right;
          padding: 3px;
          background: #ccc;
          font-size: 12px;
          font-weight: normal;
        }
      }
      p {
        width: 230px;
        height: 35px;
        padding: 12px 6px;
        font-size: 12px;
        background: rgb(247, 244, 244);
        margin-left: 20px;
      }
      span {
        display: flex;
        margin: 5px 0 0 10px;
        i {
          color: pink;
          background: #fe2270;
          padding: 2px;
          margin-right: 5px;
          font-size: 14px;
        }
        b {
          background: #fc8c63;
          color: #fff;
          font-size: 12px;
          line-height: 18px;
        }
        strong {
          flex: 1;
          text-align: end;
          color: #ccc;
          margin-right: 5px;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
